<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.69.0" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Vue基本语法 &middot; 我的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/myhugo/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/myhugo/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/myhugo/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/myhugo/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0d ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/myhugo/"><h1>我的博客</h1></a>
      <p class="lead">
       小白的逆袭之旅 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/myhugo/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>Vue基本语法</h1>
  <time datetime=2020-04-22T12:49:40&#43;0800 class="post-date">Wed, Apr 22, 2020</time>
  <h3 id="语法糖">语法糖</h3>
<pre><code>#v-bind指令用于设置HTML属性；v-bing可以直接用&quot;:&quot;来描述
eg:
&lt;a v-bind:href=&quot;url&quot;&gt;链接&lt;/a&gt;
&lt;img v-bind:src=&quot;imgUrl&quot;&gt;
&lt;!--缩写为--&gt;
&lt;a :href=&quot;url&quot;&gt;链接&lt;/a&gt;
&lt;img  :src=&quot;imgUrl&quot;&gt;
    
#v-on 指令用于绑定HTML事件；v-on 可以直接用&quot;@&quot;来描述:
eg:
&lt;button v- on:click=&quot;handleClose&quot;&gt;点击隐藏&lt;/button&gt;
&lt;!--缩写为--&gt;
&lt;button @click=&quot;handleClose&quot;&gt;点击隐藏&lt;/button&gt;
</code></pre><h3 id="v-model和v-bind的区别">v-model和v-bind的区别</h3>
<pre><code>v-bind
只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定

v-model
可以实现 表单元素和 Model 中数据的双向数据绑定
&lt;!-- 注意： v-model 只能运用在 表单元素中 --&gt;
</code></pre><h3 id="v-model和v-bind代码参考">v-model和v-bind代码参考</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
  &lt;title&gt;Document&lt;/title&gt;
  &lt;script src=&quot;./lib/vue.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;h4&gt;{{ msg }}&lt;/h4&gt;

    &lt;!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定  --&gt;
    &lt;!-- &lt;input type=&quot;text&quot; v-bind:value=&quot;msg&quot; style=&quot;width:100%;&quot;&gt; --&gt;

    &lt;!-- 使用  v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 --&gt;
    &lt;!-- 注意： v-model 只能运用在 表单元素中 --&gt;
    &lt;!-- input(radio, text, address, email....)   select    checkbox   textarea   --&gt;
    &lt;input type=&quot;text&quot; style=&quot;width:100%;&quot; v-model=&quot;msg&quot;&gt;
  &lt;/div&gt;

  &lt;script&gt;
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'
      },
      methods: {
      }
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre><h3 id="vue语法之代码中演示">vue语法之代码中演示</h3>
<pre><code>&lt;template&gt;
&lt;div&gt;
    &lt;button @click=&quot;counter++&quot;&gt;点我加1&lt;/button&gt;
    {{counter}}
    
    //计算属性的反转，写的是方法名称
    {{reverse_msg}}
    //自定义方法的反转，写的也是方法名称，但是需要加括号
    {{reverse_msg()}}
    
    //给奇数行或偶数行改变不同颜色
    &lt;ul&gt;
        // :class=&quot;&quot;绑定一个class，如果里面写的是表达式需要{}括起来，如果是字符串需要''括起来
        &lt;li v-for=&quot;(item,index) in tlist&quot; :key=&quot;index&quot; :class=&quot;{on:index%2==0,off:index%2!=0}&quot;&gt;
            {{item.text}}
        &lt;/li&gt;
    &lt;/ul&gt;
    
    //v-if做判断
    &lt;div v-if=&quot;type ==='A'&quot;&gt;A&lt;/div&gt;
    &lt;div v-else-if=&quot;type==='B'&quot;&gt;B&lt;/div&gt;
    &lt;div v-else&gt;
        既不是A ，也不是B
    &lt;/div&gt;
    
    //v-show，v-if 展示，如果 ok对应的值为flase,就不展示
    &lt;h2 v-if='ok'&gt;hello vue&lt;/h2&gt;
    &lt;h2 v-show=&quot;ok&quot;&gt;Hellow&lt;/h2&gt;
    //两种展示数据的方式
    &lt;div v-html=&quot;msg&quot;&gt;&lt;/div&gt;
    {{msg}}
&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
    //定义数据
    data () {
        return {
            msg:'&lt;h1&gt;这是一个变量&lt;/h1&gt;',
            ok:true,
            type:'A',
            tlist:[{text:'水果',price},{text:'饮料'},{text:'生鲜'},{text:'零食'}],
            counter:0,
        }
    },
    //计算属性 (在不改变原始值的情况下进行操作，非必须)
    computed:{
        //反转
        reverse_msg:function(){
            
            return this.msg.split('').reverse().join('')
        }
    },
    //自定义方法
     methods: {
         reverse_msg:function(){
            return this.msg.split('').reverse().join('')
        }
    }, 
    //监听属性(监听自定义变量的变化)
    watch:{
        //方法名称要和变量同名
        counter:function(nval,oval){
            console.log('计数器由'+oval+'变成新的'+nval)
        }
    },
    //钩子函数 (所有数据加载前 比mounted更快) created
     methods: {
             created() {
            },
        }
&lt;/script&gt;

&lt;style&gt;
    //每一个样式用 ;隔开
.on {background: skyblue；
    color: orangered}
.off{background: silver}
&lt;/style&gt;
</code></pre><h3 id="展示数据方式">展示数据方式</h3>
<pre><code>1.标签中展示数据
  &lt;div v-html=&quot;msg&quot;&gt;&lt;/div&gt;
  v-html:显示（能解析html格式）

2.胡子语法
  {{msg}}
</code></pre><h3 id="条件变颜色操作事件">条件变颜色操作(事件)</h3>
<pre><code>// :class如果里面写的是表达式需要{}括起来，如果是字符串需要''括起来 on 和 off 代表触发指定样式
    &lt;ul&gt;
        &lt;li v-for=&quot;(item,index) in tlist&quot; :key=&quot;index&quot; :class=&quot;{on:index%2==0,off:index%2!=0}&quot;&gt;
            {{item.text}}
        &lt;/li&gt;
    &lt;/ul&gt;

&lt;style&gt;
//background:背景颜色 color：字体颜色
.on {background: skyblue；
    color: orangered}
.of{background: silver}
&lt;/style&gt;
</code></pre><h3 id="计算属性计算属性在computed-内定义指定的函数-在模板直接可以-输出">计算属性计算属性：在computed 内定义指定的函数 在模板直接可以 输出</h3>
<pre><code>&lt;template&gt;
//输出写的是方法名称
{{reverse_msg}}
&lt;/template&gt;

&lt;script&gt;
computed:{
    reverse_msg:function(){
        
        //一定记得return，不给return时，方法名称的渲染是没有值的
        return this.msg.split('').reverse().join('')
    }
},
&lt;/script&gt;
</code></pre><h3 id="购物车的代码复用思想传参">购物车的代码复用思想(传参)</h3>
<pre><code>1.加减按钮
&lt;td&gt;
    &lt;button @click=&quot;minadd(index,'-')&quot;&gt;-&lt;/button&gt;
    &lt;input type=&quot;text&quot; v-model=&quot;item.num&quot;&gt;
    &lt;button @click=&quot;minadd(index,'+')&quot;&gt;+&lt;/button&gt;
&lt;/td&gt;
 //购物车加减法
minadd:function(index,type){
    if(type=='-'){
		if(this.tlist[index].num &gt; 0){
				this.tlist[index].num--;
			    }
    }else{
        this.tlist[index].num++
    }

</code></pre><pre><code>2.数量与价格混算
&lt;div&gt;
    总数量:{{totalCount(0)}}
    总价格:{{totalCount()}}
&lt;/div&gt;   
&lt;/template&gt;

&lt;script&gt;
......
totalCount(type){
            //默认价格
            let price=0
            //默认数量
            let total=0
            for(let i=0,le=this.tlist.length;i&lt;le;i++){
                total += parseInt(this.tlist[i].num);
                price+=this.tlist[i].num*this.tlist[i].price
            }
            if(type==0){
                return total
            }else{
                return price
            }
           
        }, 
&lt;/script&gt;

</code></pre>
</div>


    </main>

    
  </body>
</html>
